<template>
	<div class="dydw">
		<el-row class="row-container">
			<el-col class="row-item" :span="7">
				<div class="row-content angerbg">
					<div class="bgtitle flex-center-between">
						<div class="titleleft color-fff size-22">调动数据</div>
						<div class="titleright color-fff size-18">
							<span class="color-num"></span>
						</div>
					</div>
					<div class="diaodongtop flex-center-between">
						<div class="half-line">
							<p class="size-20 color-fff text-center">
								转入本组织
							</p>
							<p
								class="size-24 color-num weight-bold text-center"
							>
								<CountTo
									:startVal="0"
									:endVal="1"
									:duration="1000"
								/>
							</p>
						</div>
						<div class="line-column"></div>
						<div class="half-line">
							<p class="size-20 color-fff text-center">
								转入本组织
							</p>
							<p
								class="size-24 color-orange weight-bold text-center"
							>
								<CountTo
									:startVal="0"
									:endVal="1"
									:duration="1000"
								/>
							</p>
						</div>
					</div>
					<div class="diaodongchart" id="diaodongchart"></div>
					<div class="fonttitle flex-center-between">
						<span class="color-fff size-20">【党员流动分布】</span>
						<span>
							<span class="color-num"></span>
						</span>
					</div>
					<div class="liudong" id="liudong"></div>
				</div>
			</el-col>
			<el-col class="row-item" :span="10">
				<div class="row-content angerbg">
					<div class="flex-center-between dangyuanshu">
						<div class="flex align-center half-line">
							<img src="../assets/img/镰刀斧头.png" alt="" />
							<div class="flex flex-column">
								<span class="color-fff size-24"
									>正式党员数</span
								>
								<span class="color-num size-36"
									><CountTo
										:startVal="0"
										:endVal="21"
										:duration="1000"
								/></span>
							</div>
						</div>
						<div class="line-column"></div>
						<div class="flex align-center half-line">
							<img src="../assets/img/预备党员数.png" alt="" />
							<div class="flex flex-column">
								<span class="color-fff size-24"
									>预备党员数</span
								>
								<span class="color-num size-36"
									><CountTo
										:startVal="0"
										:endVal="4"
										:duration="1000"
								/></span>
							</div>
						</div>
					</div>
					<el-row style="height: calc(32% - 40rem)">
						<el-col :span="12">
							<div class="fonttitle flex-center-between">
								<span class="color-fff size-20"
									>【党员民族比例】</span
								>
								<span>
									<span class="color-num"></span>
								</span>
							</div>
							<div class="nation flex justify-center flex-column">
								<div class="per flex">
									<div
										v-for="(item, index) in nationData"
										:key="index"
										:style="{ width: item.value + '%' }"
									>
										<div
											class="color-fff size-20 flex-center-center"
										>
											{{ item.value }}%
										</div>
										<div
											class="block"
											:style="{
												backgroundColor: item.bgcolor,
											}"
										></div>
									</div>
								</div>
								<div class="len flex">
									<span
										v-for="(item, index) in nationData"
										:key="index"
										class="flex align-center color-fff size-14"
									>
										<div
											class="block"
											:style="{
												backgroundColor: item.bgcolor,
											}"
										></div>
										{{ item.name }}
									</span>
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="fonttitle flex-center-between">
								<span class="color-fff size-20"
									>【党员学历】</span
								>
								<span>
									<span class="color-num"></span>
								</span>
							</div>
							<div class="nation" id="education"></div>
						</el-col>
					</el-row>
					<el-row style="height: calc(32% - 40rem)">
						<el-col :span="12">
							<div class="fonttitle flex-center-between">
								<span class="color-fff size-20"
									>【男女年龄情况】</span
								>
								<span>
									<span class="color-num"></span>
								</span>
							</div>

							<div class="age" id="age"></div>
						</el-col>
						<el-col :span="12">
							<div class="fonttitle flex-center-between">
								<span class="color-fff size-20"
									>【入党时间】</span
								>
								<span>
									<span class="color-num"></span>
								</span>
							</div>

							<div class="age flex-center-around flex-column">
								<div
									class="ageitem flex align-center color-fff"
									v-for="(item, index) in jointimeData"
									:key="index"
								>
									<div
										class="per"
										:style="{
											width:
												(item.num / timeMax) * 100 +
												'%',
										}"
									></div>
									<span style="left: 6px" class="size-12">{{
										item.name
									}}</span>
									<span style="right: 10px" class="size-12"
										>{{ item.num }}人</span
									>
								</div>
							</div>
						</el-col>
					</el-row>
					<div
						class="fonttitle flex-center-between size-20 color-fff"
					>
						<span>【党员职业人数情况】</span>
						<span>
							<span class="color-num">14</span>
							种职业
						</span>
					</div>

					<div class="zhiye" id="zhiye"></div>
				</div>
			</el-col>
			<el-col class="row-item" :span="7">
				<div class="row-content angerbg">
					<div class="bgtitle flex-center-between">
						<div class="titleleft color-fff size-22">
							党员预备队伍
						</div>
						<div class="titleright color-fff size-18">
							<span class="color-num"></span>
						</div>
					</div>
					<div class="yubei">
						<div class="calc" v-if="!toggle">
							<div class="calcitem">
								<el-row>
									<el-col :span="5">
										<img
											src="../assets/img/加.gif"
											alt=""
										/>
									</el-col>
									<el-col :span="6">
										<div
											class="flex-center-around flex-column"
										>
											<span class="color-fff size-22"
												>新增党员</span
											>
											<span class="color-num">
												<span class="size-36">
													<CountTo
														:startVal="0"
														:endVal="31"
														:duration="1000"
												/></span>
												<span class="size-18">人</span>
											</span>
										</div>
									</el-col>
									<el-col :span="3" :offset="1">
										<div
											class="flex-center-around flex-column size-20"
										>
											<span class="color-fff opacity-5"
												>流入</span
											>
											<span class="color-num">
												<CountTo
													:startVal="0"
													:endVal="3"
													:duration="1000"
												/>
											</span></div
									></el-col>
									<el-col :span="3">
										<div
											class="flex-center-around flex-column size-20"
										>
											<span class="color-fff opacity-5"
												>调出</span
											>
											<span class="color-num">
												<CountTo
													:startVal="0"
													:endVal="2"
													:duration="1000"
												/>
											</span></div
									></el-col>
									<el-col :span="3">
										<div
											class="flex-center-around flex-column size-20"
										>
											<span class="color-fff opacity-5"
												>发展</span
											>
											<span class="color-num">
												<CountTo
													:startVal="0"
													:endVal="26"
													:duration="1000"
											/></span></div
									></el-col>
								</el-row>
							</div>
							<div class="line-row"></div>
							<div class="calcitem">
								<el-row>
									<el-col :span="5">
										<img
											src="../assets/img/减.gif"
											alt=""
										/>
									</el-col>
									<el-col :span="6">
										<div
											class="flex-center-around flex-column"
										>
											<span class="color-fff size-22"
												>减少党员</span
											>
											<span class="color-num">
												<span class="size-36">
													<CountTo
														:startVal="0"
														:endVal="9"
														:duration="1000"
												/></span>
												<span class="size-18">人</span>
											</span>
										</div>
									</el-col>
									<el-col :span="3" :offset="1">
										<div
											class="flex-center-around flex-column size-20"
										>
											<span class="color-fff opacity-5"
												>流出</span
											>
											<span class="color-num">
												<CountTo
													:startVal="0"
													:endVal="8"
													:duration="1000"
												/>
											</span></div
									></el-col>
									<el-col :span="3">
										<div
											class="flex-center-around flex-column size-20"
										>
											<span class="color-fff opacity-5"
												>调出</span
											>
											<span class="color-num">
												<CountTo
													:startVal="0"
													:endVal="1"
													:duration="1000"
												/>
											</span></div
									></el-col>
								</el-row>
							</div>
							<div class="line-row"></div>
							<div class="calcitem">
								<el-row>
									<el-col :span="5">
										<img
											src="../assets/img/失联.gif"
											alt=""
										/>
									</el-col>
									<el-col :span="6">
										<div
											class="flex-center-around flex-column"
										>
											<span class="color-fff size-22"
												>失联党员</span
											>
											<span class="color-num">
												<span class="size-36">
													<CountTo
														:startVal="0"
														:endVal="2"
														:duration="1000"
												/></span>
												<span class="size-18">人</span>
											</span>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
						<div class="type flex flex-wrap justify-between" v-else>
							<div class="typeitem flex align-center">
								<img src="../assets/img/申请.png" alt="" />
								<div class="flex flex-column justify-center">
									<span class="color-fff size-22"
										>入党申请</span
									>
									<span class="color-num"
										><span class="size-36">
											<CountTo
												:startVal="0"
												:endVal="5"
												:duration="1000" /></span
										><span class="size-22">人</span></span
									>
								</div>
							</div>
							<div class="typeitem flex align-center">
								<img src="../assets/img/积极分子.png" alt="" />
								<div class="flex flex-column justify-center">
									<span class="color-fff size-22"
										>积极分子</span
									>
									<span class="color-num"
										><span class="size-36">
											<CountTo
												:startVal="0"
												:endVal="5"
												:duration="1000" /></span
										><span class="size-22">人</span></span
									>
								</div>
							</div>
							<div class="typeitem flex align-center">
								<img src="../assets/img/发展对象.png" alt="" />
								<div class="flex flex-column justify-center">
									<span class="color-fff size-22"
										>发展对象</span
									>
									<span class="color-num"
										><span class="size-36">
											<CountTo
												:startVal="0"
												:endVal="5"
												:duration="1000" /></span
										><span class="size-22">人</span></span
									>
								</div>
							</div>
							<div class="typeitem flex align-center">
								<img src="../assets/img/镰刀斧头.png" alt="" />
								<div class="flex flex-column justify-center">
									<span class="color-fff size-22"
										>预备党员</span
									>
									<span class="color-num"
										><span class="size-36">
											<CountTo
												:startVal="0"
												:endVal="5"
												:duration="1000" /></span
										><span class="size-22">人</span></span
									>
								</div>
							</div>
						</div>
					</div>
					<div class="bgtitle flex-center-between">
						<div class="titleleft color-fff size-22">发展党员</div>
						<div class="titleright color-fff size-18">
							<span class="color-num"></span>
						</div>
					</div>
					<div class="line-bar" id="fazhan"></div>

					<table border="1" align="center">
						<tr>
							<th>组织名称</th>
							<th>入党申请</th>
							<th>发展党员</th>
						</tr>
						<tr>
							<td>组织名称1</td>
							<td>5</td>
							<td>91</td>
						</tr>
						<tr>
							<td>组织名称2</td>
							<td>30</td>
							<td>8</td>
						</tr>
					</table>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import 'echarts-liquidfill/src/liquidFill.js'
import CountTo from 'vue-count-to'
export default {
	components: { CountTo },
	data() {
		return {
			DDChart: null,
			toggle: false,
			nationData: [
				{ name: '汉族', value: 59, bgcolor: 'rgb(80, 131, 248)' },
				{ name: '少数民族', value: 41, bgcolor: 'rgb(97, 223, 249)' },
			],
			eduData: [
				{ count: 0.46, des: '暂无', num: 46 },
				{ count: 0.04, des: '小学', num: 4 },
				{ count: 0.04, des: '博士研究生', num: 4 },
				{ count: 0.04, des: '硕士研究生', num: 4 },
				{ count: 0.04, des: '硕士生班', num: 4 },
				{ count: 0.04, des: '中央党校研究生', num: 4 },
				{ count: 0.04, des: '省（区、市）委党校研究生', num: 4 },
				{ count: 0.08, des: '大学', num: 8 },
				{ count: 0.04, des: '大专', num: 4 },
				{ count: 0.04, des: '大学普通班', num: 4 },
				{ count: 0.04, des: '第二学士学位班', num: 4 },
				{ count: 0.04, des: '中央党校大学', num: 4 },
				{ count: 0.04, des: '省（区、市）委党校大学', num: 4 },
				{ count: 0.04, des: '省（区、市）委党校大专', num: 4 },
			],
			ageData: {
				fInfo: [
					{ name: '30岁以下', num: 3 },
					{ name: '31-35岁', num: 1 },
					{ name: '36-40岁', num: 0 },
					{ name: '41-45岁', num: 0 },
					{ name: '46-50岁', num: 1 },
					{ name: '51岁以上', num: 3 },
				],
				mInfo: [
					{ name: '30岁以下', num: 1 },
					{ name: '31-35岁', num: 1 },
					{ name: '36-40岁', num: 2 },
					{ name: '41-45岁', num: 0 },
					{ name: '46-50岁', num: 0 },
					{ name: '51岁以上', num: 2 },
				],
			},
			jointimeData: [
				{ name: '1949年以前', num: 0 },
				{ name: '1949-10-1至1966-5-1', num: 0 },
				{ name: '1966-5-1至1976-10-31', num: 0 },
				{ name: '1976-11-1至1978-12-31', num: 0 },
				{ name: '1979-1-1至2002-10-31', num: 0 },
				{ name: '2002-11-01至2012-10-31', num: 3 },
				{ name: '2012年及以后', num: 12 },
			],
			timeMax: 0,
			zhiyeData: [
				{ des: '公务员', num: 1 },
				{ des: '012参照公务员法管理的工作人员', num: 1 },
				{ des: '事业单位管理岗位', num: 1 },
				{ des: '0212事业单位专业技术岗位', num: 1 },
				{ des: '0213公有经济控制企业管理岗位', num: 1 },
				{ des: '0214公有经济控制企业专业技术岗位', num: 1 },
				{ des: '0215非公有经济控制企业管理岗位', num: 1 },
				{ des: '0216非公有经济控制企业专业技术岗位', num: 1 },
				{ des: '0217民办非企业管理岗位', num: 1 },
				{ des: '0218民办非企业专业技术岗位', num: 1 },
				{ des: '0312非公有企业工勤岗位', num: 1 },
				{ des: '11农牧渔业生产人员', num: 1 },
				{
					des: '党组织关系在人才（劳动）服务中心，不明职业的人员',
					num: 2,
				},
			],
		}
	},
	mounted() {
		this.chartInit()
		setInterval(() => {
			this.toggle = !this.toggle
		}, 3000)
		this.timeMax = Math.max.apply(
			null,
			this.jointimeData.map((item) => item.num)
		)
	},
	methods: {
		chartInit() {
			const DD = document.getElementById('diaodongchart')
			this.DDChart = this.$echarts.init(DD)
			this.DDChart.setOption({
				grid: {
					top: '10%',
					bottom: '10%',
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(60,60,60,0.8)',
					padding: [3, 2],
					textStyle: {
						color: '#fff',
						fontSize: 12,
					},
					borderColor: 'transparent',
				},
				xAxis: {
					type: 'category',
					data: ['其他'],
					axisLine: {
						show: false,
					},
					axisLabel: {
						color: '#ccc',
						width: 50,
						interval: 0,
						overflow: 'truncate',
						ellipsis: '...',
					},
				},
				yAxis: {
					// show: true,
					type: 'value',
					splitLine: {
						show: false,
					},
					axisLabel: {
						color: '#ccc',
					},
				},
				series: [
					{
						name: '转入人数',
						data: [120],
						type: 'bar',
						barWidth: 16,
						itemStyle: {
							color: this.setDDColor(0),
							borderRadius: 8,
						},
					},
					{
						name: '转出人数',
						data: [200],
						type: 'bar',
						barWidth: 16,
						itemStyle: {
							color: this.setDDColor(1),
							borderRadius: 8,
						},
					},
				],
			})
			const liudong = document.getElementById('liudong')
			const LIUDONG = this.$echarts.init(liudong)
			const data = [
				{ name: '北京', value: 199 },
				{ name: '天津', value: 42 },
				{ name: '河北', value: 102 },
				{ name: '山西', value: 81 },
				{ name: '内蒙古', value: 47 },
				{ name: '辽宁', value: 67 },
				{ name: '吉林', value: 82 },
				{ name: '黑龙江', value: 123 },
				{ name: '上海', value: 24 },
				{ name: '江苏', value: 92 },
				{ name: '浙江', value: 114 },
				{ name: '安徽', value: 109 },
				{ name: '福建', value: 116 },
				{ name: '江西', value: 91 },
				{ name: '山东', value: 119 },
				{ name: '河南', value: 137 },
				{ name: '湖北', value: 116 },
				{ name: '湖南', value: 114 },
				{ name: '重庆', value: 91 },
				{ name: '四川', value: 125 },
				{ name: '贵州', value: 62 },
				{ name: '云南', value: 83 },
				{ name: '西藏', value: 9 },
				{ name: '陕西', value: 80 },
				{ name: '甘肃', value: 56 },
				{ name: '青海', value: 10 },
				{ name: '宁夏', value: 18 },
				{ name: '新疆', value: 180 },
				{ name: '广东', value: 123 },
				{ name: '广西', value: 59 },
				{ name: '海南', value: 14 },
			]
			let geoCoordMap = {}
			const toolTipData = [
				{
					name: '北京',
					value: [
						{ name: '科技人才总数', value: 95 },
						{ name: '理科', value: 82 },
					],
				},
				{
					name: '天津',
					value: [
						{ name: '文科', value: 22 },
						{ name: '理科', value: 20 },
					],
				},
				{
					name: '河北',
					value: [
						{ name: '文科', value: 60 },
						{ name: '理科', value: 42 },
					],
				},
				{
					name: '山西',
					value: [
						{ name: '文科', value: 40 },
						{ name: '理科', value: 41 },
					],
				},
				{
					name: '内蒙古',
					value: [
						{ name: '文科', value: 23 },
						{ name: '理科', value: 24 },
					],
				},
				{
					name: '辽宁',
					value: [
						{ name: '文科', value: 39 },
						{ name: '理科', value: 28 },
					],
				},
				{
					name: '吉林',
					value: [
						{ name: '文科', value: 41 },
						{ name: '理科', value: 41 },
					],
				},
				{
					name: '黑龙江',
					value: [
						{ name: '文科', value: 35 },
						{ name: '理科', value: 31 },
					],
				},
				{
					name: '上海',
					value: [
						{ name: '文科', value: 12 },
						{ name: '理科', value: 12 },
					],
				},
				{
					name: '江苏',
					value: [
						{ name: '文科', value: 47 },
						{ name: '理科', value: 45 },
					],
				},
				{
					name: '浙江',
					value: [
						{ name: '文科', value: 57 },
						{ name: '理科', value: 57 },
					],
				},
				{
					name: '安徽',
					value: [
						{ name: '文科', value: 57 },
						{ name: '理科', value: 52 },
					],
				},
				{
					name: '福建',
					value: [
						{ name: '文科', value: 59 },
						{ name: '理科', value: 57 },
					],
				},
				{
					name: '江西',
					value: [
						{ name: '文科', value: 49 },
						{ name: '理科', value: 42 },
					],
				},
				{
					name: '山东',
					value: [
						{ name: '文科', value: 67 },
						{ name: '理科', value: 52 },
					],
				},
				{
					name: '河南',
					value: [
						{ name: '文科', value: 69 },
						{ name: '理科', value: 68 },
					],
				},
				{
					name: '湖北',
					value: [
						{ name: '文科', value: 60 },
						{ name: '理科', value: 56 },
					],
				},
				{
					name: '湖南',
					value: [
						{ name: '文科', value: 62 },
						{ name: '理科', value: 52 },
					],
				},
				{
					name: '重庆',
					value: [
						{ name: '文科', value: 47 },
						{ name: '理科', value: 44 },
					],
				},
				{
					name: '四川',
					value: [
						{ name: '文科', value: 65 },
						{ name: '理科', value: 60 },
					],
				},
				{
					name: '贵州',
					value: [
						{ name: '文科', value: 32 },
						{ name: '理科', value: 30 },
					],
				},
				{
					name: '云南',
					value: [
						{ name: '文科', value: 42 },
						{ name: '理科', value: 41 },
					],
				},
				{
					name: '西藏',
					value: [
						{ name: '文科', value: 5 },
						{ name: '理科', value: 4 },
					],
				},
				{
					name: '陕西',
					value: [
						{ name: '文科', value: 38 },
						{ name: '理科', value: 42 },
					],
				},
				{
					name: '甘肃',
					value: [
						{ name: '文科', value: 28 },
						{ name: '理科', value: 28 },
					],
				},
				{
					name: '青海',
					value: [
						{ name: '文科', value: 5 },
						{ name: '理科', value: 5 },
					],
				},
				{
					name: '宁夏',
					value: [
						{ name: '文科', value: 10 },
						{ name: '理科', value: 8 },
					],
				},
				{
					name: '新疆',
					value: [
						{ name: '文科', value: 36 },
						{ name: '理科', value: 31 },
					],
				},
				{
					name: '广东',
					value: [
						{ name: '文科', value: 63 },
						{ name: '理科', value: 60 },
					],
				},
				{
					name: '广西',
					value: [
						{ name: '文科', value: 29 },
						{ name: '理科', value: 30 },
					],
				},
				{
					name: '海南',
					value: [
						{ name: '文科', value: 8 },
						{ name: '理科', value: 6 },
					],
				},
			]
			LIUDONG.showLoading()
			let mapFeatures = this.$echarts.getMap('china').geoJson.features
			LIUDONG.hideLoading()
			mapFeatures.forEach(function (v) {
				// 地区名称
				let name = v.properties.name
				// 地区经纬度
				geoCoordMap[name] = v.properties.cp
			})
			let max = 480,
				min = 9 // todo
			let maxSize4Pin = 100,
				minSize4Pin = 20

			let convertData = function (data) {
				let res = []
				for (let i = 0; i < data.length; i++) {
					let geoCoord = geoCoordMap[data[i].name]
					if (geoCoord) {
						res.push({
							name: data[i].name,
							value: geoCoord.concat(data[i].value),
						})
					}
				}
				return res
			}
			LIUDONG.setOption({
				tooltip: {
					padding: 0,
					enterable: true,
					transitionDuration: 1,
					textStyle: {
						color: '#000',
						decoration: 'none',
					},
					// position: function (point, params, dom, rect, size) {
					//   return [point[0], point[1]];
					// },
					formatter: function (params) {
						// console.log(params)
						let tipHtml = ''
						tipHtml =
							'<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
							'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
							'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
							'</i>' +
							'<span style="margin-left:10px;color:#fff;font-size:16px;">' +
							params.name +
							'</span>' +
							'</div>' +
							'<div style="padding:20px">' +
							'<p style="color:#fff;font-size:12px;">' +
							'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
							'</i>' +
							'单位总数：' +
							'<span style="color:#11ee7d;margin:0 6px;">' +
							toolTipData.length +
							'</span>' +
							'个' +
							'</p>' +
							'<p style="color:#fff;font-size:12px;">' +
							'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
							'</i>' +
							'总人数：' +
							'<span style="color:#f48225;margin:0 6px;">' +
							toolTipData.length +
							'</span>' +
							'个' +
							'</p>' +
							'<p style="color:#fff;font-size:12px;">' +
							'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
							'</i>' +
							'总人数：' +
							'<span style="color:#f4e925;margin:0 6px;">' +
							toolTipData.length +
							'</span>' +
							'个' +
							'</p>' +
							'<p style="color:#fff;font-size:12px;">' +
							'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
							'</i>' +
							'总人数：' +
							'<span style="color:#25f4f2;margin:0 6px;">' +
							toolTipData.length +
							'</span>' +
							'个' +
							'</p>' +
							'</div>' +
							'</div>'
						setTimeout(function () {
							tooltipCharts(params.name)
						}, 10)
						return tipHtml
					},
				},

				visualMap: {
					show: true,
					min: 0,
					max: 200,
					left: '10%',
					top: 'bottom',
					calculable: true,
					seriesIndex: [1],
					inRange: {
						color: ['#04387b', '#467bc0'], // 蓝绿
					},
				},
				geo: {
					show: true,
					map: mapName,
					label: {
						normal: {
							show: false,
						},
						emphasis: {
							show: false,
						},
					},
					roam: false,
					itemStyle: {
						normal: {
							areaColor: '#023677',
							borderColor: '#1180c7',
						},
						emphasis: {
							areaColor: '#4499d0',
						},
					},
				},
				series: [
					{
						name: '散点',
						type: 'scatter',
						coordinateSystem: 'geo',
						data: convertData(data),
						symbolSize: function (val) {
							return val[2] / 10
						},
						label: {
							normal: {
								formatter: '{b}',
								position: 'right',
								show: true,
							},
							emphasis: {
								show: true,
							},
						},
						itemStyle: {
							normal: {
								color: '#fff',
							},
						},
					},
					{
						type: 'map',
						map: mapName,
						geoIndex: 0,
						aspectScale: 0.75, //长宽比
						showLegendSymbol: false, // 存在legend时显示
						label: {
							normal: {
								show: true,
							},
							emphasis: {
								show: false,
								textStyle: {
									color: '#fff',
								},
							},
						},
						roam: true,
						itemStyle: {
							normal: {
								areaColor: '#031525',
								borderColor: '#3B5077',
							},
							emphasis: {
								areaColor: '#2B91B7',
							},
						},
						animation: false,
						data: data,
					},
					{
						name: '点',
						type: 'scatter',
						coordinateSystem: 'geo',
						zlevel: 6,
					},
					{
						name: 'Top 5',
						type: 'effectScatter',
						coordinateSystem: 'geo',
						data: convertData(
							data
								.sort(function (a, b) {
									return b.value - a.value
								})
								.slice(0, 10)
						),
						symbolSize: function (val) {
							return val[2] / 10
						},
						showEffectOn: 'render',
						rippleEffect: {
							brushType: 'stroke',
						},
						hoverAnimation: true,
						label: {
							normal: {
								formatter: '{b}',
								position: 'left',
								show: false,
							},
						},
						itemStyle: {
							normal: {
								color: 'yellow',
								shadowBlur: 10,
								shadowColor: 'yellow',
							},
						},
						zlevel: 1,
					},
				],
			})
			const edu = document.getElementById('education')
			const EDU = this.$echarts.init(edu)
			EDU.setOption({
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['60%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								color: '#fff',
								fontWeight: 'bold',
								formatter: ['{b|{b}}', '{c|{c}%}'].join('\n'),
								rich: {
									b: {
										fontSize: 16,
										lineHeight: 22,
									},
									c: {
										fontSize: 24,
										lineHeight: 32,
									},
								},
							},
						},
						labelLine: {
							show: false,
						},
						data: this.eduData.map((item) => {
							return { value: item.count, name: item.des }
						}),
					},
				],
			})
			const age = document.getElementById('age')
			const AGE = this.$echarts.init(age)
			AGE.setOption({
				color: ['#61DFF9', '#EB7990'],
				title: '',
				legend: {
					data: ['男性', '女性'],
					itemWidth: 16,
					itemHeight: 10,
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
					right: 0,
					orient: 'vertical',
				},
				radar: {
					// shape: 'circle',
					indicator: this.ageData.fInfo.map((item) => {
						return { name: item.name, max: 3 }
					}),
					axisName: {
						color: '#fff',
						fontSize: 10,
					},
					nameGap: 5,
				},
				series: [
					{
						// name: '男性',
						type: 'radar',
						data: [
							{
								value: this.ageData.mInfo.map((item) => {
									return item.num
								}),
								name: '男性',
								areaStyle: {
									opacity: 0.5,
								},
							},
							{
								value: this.ageData.fInfo.map((item) => {
									return item.num
								}),
								name: '女性',
								areaStyle: {
									opacity: 0.5,
								},
							},
						],
					},
				],
			})
			const zhiye = document.getElementById('zhiye')
			const ZHIYE = this.$echarts.init(zhiye)

			ZHIYE.setOption({
				grid: {
					top: '10%',
					bottom: '15%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b}: {c}',
					backgroundColor: 'rgba(66,66,66,0.7)',
					borderColor: 'transparent',
					padding: [2, 3],
					textStyle: {
						color: '#fff',
					},
				},
				xAxis: {
					type: 'category',
					data: this.zhiyeData.map((item) => {
						return item.des
					}),
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#ccc',
						width: 50,
						interval: 0,
						overflow: 'truncate',
						ellipsis: '...',
					},
				},
				yAxis: {
					type: 'value',
					splitLine: {
						show: false,
					},
					axisLabel: {
						color: '#ccc',
					},
				},
				series: [
					{
						z: 1,
						name: '',
						type: 'pictorialBar',
						symbolPosition: 'end',
						data: this.zhiyeData.map((item) => {
							return { name: item.des, value: 0 }
						}), //此数据对应顶部组件
						symbol: 'diamond',
						symbolOffset: ['0%', '-50%'],
						symbolSize: [20, 10],
						itemStyle: {
							normal: {
								color: this.setColor(0),
							},
						},
						tooltip: {
							show: false,
						},
					},
					{
						z: 2,
						data: this.zhiyeData.map((item) => {
							return { name: item.des, value: item.num }
						}),
						type: 'bar',
						barGap: '0',
						barWidth: 10,
						showBackground: true,
						backgroundStyle: {
							color: this.setColor(1),
						},
						itemStyle: {
							borderRadius: [0, 0, 0, 0],
							color: this.setColor(0),
						},
					},
					{
						z: 3,
						data: this.zhiyeData.map((item) => {
							return { name: item.des, value: item.num }
						}),
						type: 'bar',
						barWidth: 10,
						showBackground: true,
						backgroundStyle: {
							color: this.setColor(1),
						},
						symbol: 'diamond', //底部组件形状，不写默认为椭圆
						symbolOffset: ['0%', '50%'], //与柱子的偏移角度
						symbolSize: [80, 10], //底面[宽，高]
						itemStyle: {
							normal: {
								color: this.setColor(0), //底面左右颜色（深，浅）
							},
						},
					},
					{
						z: 4,
						name: '',
						type: 'pictorialBar',
						symbolPosition: 'end',
						data: this.zhiyeData.map((item) => {
							return {
								name: item.des,
								value: Math.max.apply(
									null,
									this.zhiyeData.map((item) => item.num)
								),
							}
						}), //此数据对应顶部组件
						symbol: 'diamond',
						symbolOffset: ['0%', '-50%'],
						symbolSize: [20, 10],
						itemStyle: {
							normal: {
								color: 'rgb(45,50,117)',
							},
						},
						tooltip: {
							show: false,
						},
					},
					{
						z: 5,
						name: '',
						type: 'pictorialBar',
						symbolPosition: 'end',
						data: this.zhiyeData.map((item) => {
							return { name: item.des, value: item.num }
						}), //此数据对应顶部组件
						symbol: 'diamond',
						symbolOffset: ['0%', '-50%'],
						symbolSize: [20, 10],
						itemStyle: {
							normal: {
								color: 'rgb(16,169,255)',
							},
						},
						tooltip: {
							show: false,
						},
					},
				],
			})
			const fazhan = document.getElementById('fazhan')
			const FAZHAN = this.$echarts.init(fazhan)
			FAZHAN.setOption({
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(60,60,60,0.8)',
					padding: [3, 2],
					textStyle: {
						color: '#fff',
						fontSize: 12,
					},
					borderColor: 'transparent',
				},
				grid: {
					top: '15%',
					left: 70,
					bottom: '15%',
				},
				xAxis: {
					type: 'category',
					data: ['城市街道', '机关', '社会组织', '其他'],
					axisPointer: {
						type: 'shadow',
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#fff',
					},
				},
				yAxis: {
					type: 'value',
					name: '（人）',
					min: 0,
					splitLine: {
						show: false,
					},
					axisLabel: {
						color: '#fff',
					},
					nameTextStyle: {
						color: '#fff',
					},
				},
				series: [
					{
						name: '入党申请',
						type: 'line',
						tooltip: {
							valueFormatter: function (value) {
								return value
							},
						},
						itemStyle: {
							color: '#fff',
						},
						data: [1, 2, 4, 3],
					},
					{
						name: '发展党员',
						type: 'bar',
						barWidth: 15,
						tooltip: {
							valueFormatter: function (value) {
								return value
							},
						},
						data: [1, 7, 3, 2],
					},
				],
			})
		},
		setDDColor(num) {
			const colors = [
				['rgb(82,134,248)', 'rgb(152,247,253)'],
				['rgb(247,103,128)', 'rgb(225,171,127)'],
			]
			const color = {
				type: 'linear',
				x: 0,
				y: 1,
				x2: 0,
				y2: 0,
				global: false,
				colorStops: [
					{
						offset: 0,
						color: colors[num][0],
					},
					{
						offset: 1,
						color: colors[num][1],
					},
				],
			}

			return color
		},
		setColor(num) {
			const colors = [
				['rgb(1,203,255)', 'rgb(16,169,255)', 'rgb(30,135,255)'],
				['rgb(57,61,126)', 'rgb(51,56,122)', 'rgb(45,50,117)'],
			]
			let color = {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 1,
				y2: 0,
				global: false,
				colorStops: [
					{
						offset: 0,
						color: colors[num][0],
					},
					// {
					// 	offset: 0.5,
					// 	color: colors[0],
					// },
					// {
					// 	offset: 0.5,
					// 	color: colors[1],
					// },
					{
						offset: 1,
						color: colors[num][1],
					},
				],
			}
			return color
		},
	},
}
</script>
<style lang="less" scoped>
.dydw {
	width: 100%;
	height: 100%;
	::v-deep .el-col {
		height: 100%;
	}
	.row-content {
		&:hover {
			cursor: pointer;
			background-color: rgba(255, 255, 255, 0.5);
		}
	}
	.diaodongtop {
		height: 11%;
		p {
			margin: 12px 0;
		}
	}
	.diaodongchart {
		width: 100%;
		height: 22%;
	}
	.liudong {
		width: 100%;
		height: 51%;
		background: lightblue;
	}
	.dangyuanshu {
		width: 100%;
		height: 140rem;
		background: rgb(26, 28, 97);
		margin-top: 20px;
		margin-bottom: 20px;
		img {
			width: 92px;
			height: 92px;
			margin: 0 25px;
		}
	}
	.nation {
		width: 100%;
		height: calc(100% - 40rem);
		.per {
			width: 60%;
			height: 70rem;
			margin: 0 auto;
			.block {
				width: 100%;
				height: 30rem;
			}
		}
		.len {
			width: 60%;
			margin: 0 auto;
			span:last-child {
				margin-left: 15px;
			}
			.block {
				width: 30px;
				height: 6px;
				border-radius: 1px;
				margin-right: 6px;
			}
		}
	}
	.age {
		width: 100%;
		height: calc(100% - 40rem);
		padding: 10px 0;
		box-sizing: border-box;
		.ageitem {
			width: 95%;
			background: rgb(31, 32, 93);
			position: relative;
			height: 20px;
			cursor: pointer;
			.per {
				height: 100%;
				background: linear-gradient(
					to left,
					rgb(63, 121, 255),
					rgb(116, 158, 255)
				);
				position: absolute;
			}
			span {
				position: absolute;
			}
		}
	}
	.zhiye {
		width: 100%;
		height: calc(24% - 40rem);
	}
	.yubei {
		height: 41%;
		margin: 10px 0;
		.calcitem {
			height: 100px;
			.flex-column {
				width: 100%;
				height: 100px;
			}
			img {
				width: 92px;
				height: 92px;
			}
		}
		.type {
			width: 100%;
			height: 100%;

			.typeitem {
				width: calc(50% - 4px);
				height: 150px;
				background: rgb(26, 28, 97);
				margin-bottom: 8px;
				img {
					width: 88px;
					height: 88px;
					margin: 0 16px;
				}
			}
		}
	}
	.line-bar {
		width: 100%;
		height: 18%;
	}
	table {
		border-collapse: collapse;
		border: solid 1px rgb(68, 98, 161);
		color: #fff;
		text-align: center;
		line-height: 33px;
		width: 100%;
		font-size: 16rem;
		height: 18%;
		th {
			background: rgb(13, 17, 91);
		}
		tr {
			&:nth-child(even) {
				background: rgb(41, 46, 116);
			}
			&:nth-child(odd) {
				background: rgb(32, 37, 106);
			}
		}
	}
}
</style>